<template>
  <a-modal width="800px" :visible="show" centered title="订单确认" okText="提交订单" cancelText="返回" destroyOnClose
           :confirmLoading="loading"
           :bodyStyle="{'height':'80vh','overflow-y':'auto','padding':'10px','padding-bottom':0}" class="custom-modal"
           @cancel="handleCancel" @ok="handleOk">
    <order-item title="商品清单">
      <div slot="content">
        <div class="order-desc" v-for="item in manifestConfig" :key="item.value">
          <div class="order-desc-hint manifest">
            {{ item.label }}：
          </div>
          <div class="order-desc-content">
            {{ data[item.value] }}
          </div>
        </div>
      </div>
    </order-item>
    <order-item title="核对订单">
      <div slot="content">
        <div class="order-desc" v-for="item in moneyConfig" :key="item.value">
          <div class="order-desc-hint">
            {{ item.label }}：
          </div>
          <div class="order-desc-content">
            <div v-if="item.slot==='money'" :class="{'red':item.red}">¥{{ data[item.value]|money }}</div>
            <div v-else>{{ data[item.value] }}</div>
          </div>
        </div>
      </div>
    </order-item>
    <order-item title="订单附言" :show-class="false">
      <div slot="content">
        <a-textarea placeholder="请输入订单附言" :rows="3" v-model="remark" :maxLength="200"></a-textarea>
      </div>
    </order-item>
    <div class="order-protocol">
      <a-checkbox @change="changeCheck" :checked="protocolCheck">我已阅读并同意《<span class="colorMain">深圳数据交易所用户服务协议</span>》，并确保合法使用此数据，不得用于一切违法行为！
      </a-checkbox>
    </div>
  </a-modal>
</template>

<script>
import OrderItem from './OrderItem'

export default {
  name: 'OrderConfirm',
  components: {
    OrderItem
  },
  props: {
    show: false,
    data: {},
    loading: false
  },
  data () {
    return {
      protocolCheck: false,
      remark: '',
      manifestConfig: [
        {label: '商品名称', value: 'goodsName'},
        {label: '规格', value: 'showString'},
        {label: '提供方名称', value: 'supplierName'},
        {label: '付费方式', value: 'payModel'},
        {label: '购买数量', value: 'num'},
      ],
      moneyConfig: [
        {label: '总金额', value: 'total', slot: 'money'},
        {label: '优惠金额', value: 'discount', slot: 'money'},
        {label: '应付金额', value: 'subAmount', slot: 'money', red: true},
      ]
    }
  },
  methods: {
    handleCancel () {
      this.$emit('cancel')
    },
    handleOk () {
      if (this.protocolCheck) {
        this.$emit('ok', this.remark)
      } else {
        this.$message.error('请先阅读并勾选底部协议')
      }
    },
    changeCheck (e) {
      this.protocolCheck = e.target.checked
    },
    resetData () {
      this.remark = ''
      this.protocolCheck = false
    }
  }
}
</script>

<style scoped lang="scss">
$mainColor: #0078FE;

.colorMain {
  color: $mainColor;
}

.order-desc {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  line-height: 14px;
  font-weight: 400;
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }

  .order-desc-hint {
    color: #646464;
    width: 70px;

    &.manifest {
      width: 84px;
    }
  }

  .order-desc-content {
    color: #323232;
    flex: 1;
    margin-left: 10px;

    .red {
      color: #E03437;
    }
  }
}

.order-protocol {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #646464;
  line-height: 12px;
  position: sticky;
  bottom: 0;
  background: white;
  padding: 15px 10px;
  width: 100%;
  border-top: 1px dotted #e2e2e2;
  //box-shadow: 0 2px 5px #e2e2e2 inset;
}

.custom-modal {
  position: relative;

  /deep/ .ant-modal-body {
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: #18171723;
      -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }
  }
}
</style>
